<template>
  <div class="bg-light">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/math/real" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">数学真题</h5>
      <div class="dropdown" ref="dropdown">
        <button 
          class="btn btn-outline-secondary dropdown-toggle" 
          type="button" 
          @click="toggleDropdown"
        >
          {{ selectedYear }}年
        </button>
        <ul class="dropdown-menu dropdown-menu-end" :class="{ show: isDropdownOpen }">
          <li v-for="year in years" :key="year">
            <a 
              class="dropdown-item" 
              :class="{ active: year === selectedYear }"
              href="#"
              @click.prevent="selectYear(year)"
            >
              {{ year }}年
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 题目内容 -->
    <div class="question-container">
      <div class="question-number">第{{ currentQuestionIndex + 1 }}题 / 共{{ totalQuestions }}题</div>
      <div class="chapter-info">
        <i class="bi bi-bookmark-fill"></i>
        {{ currentQuestion.chapter }}
      </div>
      <div class="question-text">
        {{ currentQuestion.text }}
        <img 
          v-if="currentQuestion.image" 
          :src="currentQuestion.image" 
          :alt="currentQuestion.imageAlt || '题目图片'" 
          class="question-image"
        >
      </div>
      <div class="options-container">
        <div 
          v-for="option in currentQuestion.options" 
          :key="option.key"
          class="option-item"
          :class="{ selected: selectedOption === option.key }"
          @click="selectOption(option.key)"
        >
          {{ option.key }}. {{ option.text }}
        </div>
      </div>
    </div>

    <!-- 导航按钮 -->
    <div class="navigation-buttons d-flex justify-content-between">
      <div class="d-flex gap-2">
        <button 
          class="btn btn-outline-secondary"
          @click="prevQuestion"
          :disabled="currentQuestionIndex === 0"
        >
          上一题
        </button>
        <button 
          class="btn btn-outline-secondary"
          @click="nextQuestion"
          :disabled="currentQuestionIndex === totalQuestions - 1"
        >
          下一题
        </button>
      </div>
      <router-link 
        :to="`/math/real/explanation?year=${selectedYear}&question=${currentQuestionIndex + 1}`" 
        class="btn btn-primary"
      >
        <i class="bi bi-journal-text"></i>
        答案解析
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MathRealPracticeView',
  data() {
    return {
      selectedYear: 2024,
      years: [2024, 2023, 2022, 2021, 2020],
      isDropdownOpen: false,
      currentQuestionIndex: 0,
      selectedOption: null,
      totalQuestions: 25,
      currentQuestion: {
        chapter: '高等数学 - 微积分',
        text: '已知函数f(x)=ln(x+√(x²+1))，则f\'(x)=?',
        image: 'path/to/question-image.jpg',
        imageAlt: '题目图片',
        options: [
          { key: 'A', text: '1/√(x²+1)' },
          { key: 'B', text: 'x/√(x²+1)' },
          { key: 'C', text: '1/(x²+1)' },
          { key: 'D', text: 'x/(x²+1)' }
        ]
      }
    }
  },
  created() {
    // 从路由参数获取年份
    const year = parseInt(this.$route.query.year)
    if (year && this.years.includes(year)) {
      this.selectedYear = year
    }
  },
  mounted() {
    // 点击外部关闭下拉菜单
    document.addEventListener('click', this.handleClickOutside)
  },
  beforeUnmount() {
    // 组件销毁前移除事件监听
    document.removeEventListener('click', this.handleClickOutside)
  },
  methods: {
    toggleDropdown() {
      this.isDropdownOpen = !this.isDropdownOpen
    },
    handleClickOutside(event) {
      if (this.$refs.dropdown && !this.$refs.dropdown.contains(event.target)) {
        this.isDropdownOpen = false
      }
    },
    selectYear(year) {
      this.selectedYear = year
      this.isDropdownOpen = false
      // 这里可以加载对应年份的题目
    },
    selectOption(key) {
      this.selectedOption = key
    },
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--
        this.selectedOption = null
      }
    },
    nextQuestion() {
      if (this.currentQuestionIndex < this.totalQuestions - 1) {
        this.currentQuestionIndex++
        this.selectedOption = null
      }
    }
  }
}
</script>

<style scoped>
.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header .dropdown-toggle {
  padding: 4px 10px;
  font-size: 0.9rem;
}

.header .dropdown-menu {
  min-width: 100px;
}

.header .dropdown-item.active {
  background-color: #40E0D0;
  color: white;
}

.question-container {
  background: white;
  margin: 15px;
  padding: 20px;
  border-radius: 15px;
  line-height: 1.8;
}

.question-text {
  margin-bottom: 20px;
  color: #333;
}

.question-image {
  max-width: 100%;
  margin: 15px 0;
  border-radius: 8px;
}

.options-container {
  margin-top: 15px;
}

.option-item {
  background: #f8f9fa;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.option-item:hover {
  background: #e9ecef;
}

.option-item.selected {
  background: #40E0D0;
  color: white;
}

.navigation-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: white;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.question-number {
  color: #666;
  margin-bottom: 10px;
  font-size: 0.9rem;
}

.chapter-info {
  color: #40E0D0;
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  background: white;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 0.25rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  min-width: 10rem;
}

.dropdown-menu.show {
  display: block;
}
</style> 